<template>
    <section class="main-home-index">
      <div class="tab-container">
          
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{showLabel}} <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :key="index" v-for="(item,index) in options" :command="item.value">
              {{item.label}}
              <span v-if="item.label==showLabel" class="iconfont icon-select select-time-home"></span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

          <el-tabs v-model="activeName" :class="tabFocus == 'facebook' ? 'facebook' : 'google'"  @tab-click="handleTabClick">
            <el-tab-pane label="Facebook" name="facebook" :disabled="!isBindFB">Facebook</el-tab-pane>
            <el-tab-pane label="Google" name="google" :disabled="!isBindGoogle">Google</el-tab-pane>
          </el-tabs>
      </div>

        <AccountBalanceFB :showLoadingProps="true"  v-if="tabFocus == 'facebook'"  :from="0" :showTime="showLabel"/>
        <AccountBalanceGoogle :showLoadingProps="true" v-if="tabFocus == 'google'" :from="0" :showTime="showLabel"/>

        <ul class="main-data">

          <li v-show="tabFocus == 'facebook'">
            <div class="arrow"></div>
            <span class="iconfont icon-total-coverage"><b> 总覆盖数</b></span>
            <i>{{showLabel}}</i>
            <h3>{{effectiveInfo.reach || 0 }}</h3>
          </li>
          <li class="c" v-show="tabFocus == 'facebook'">
            <div class="arrow total-show"></div>
            <span class="iconfont icon-total-shows"><b> 总展示</b></span>
            <i>{{showLabel}}</i>
            <h3>{{effectiveInfo.impressions || 0 }}</h3>
          </li>
          <li class="eft" v-show="tabFocus == 'facebook'">
            <div class="arrow total-effect"></div>
            <span class="iconfont icon-effectiveness">
                <b> 总成效</b>
                <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content" class="mult-text">
                    目标为访问量时，成效为点击链接量<br />目标为品牌知名度时，成效为覆盖数<br />目标为主页赞时，成效为点赞数</div>
                    <i class="iconfont icon-tip "></i>
                </el-tooltip>
            </span>
            <i>{{showLabel}}</i>
            <h3>{{effectiveInfo.effective || 0 }}</h3>
          </li>
          <li v-show="tabFocus == 'facebook'">
            <div class="arrow interaction"></div>
            <span class="iconfont icon-Interaction">
                <b> 总互动</b>
                <el-tooltip class="item" effect="dark" placement="top">
                    <div slot="content" class="mult-text">
                    总互动包括：点赞、"大爱"、<br />"签到"、"点击链接"等</div>
                    <i class="iconfont icon-tip "></i>
                </el-tooltip>
            </span>
            <i>{{showLabel}}</i>
            <h3>{{effectiveInfo.actions || 0 }}</h3>
          </li>


          <li v-show="tabFocus == 'google'">
            <div class="arrow"></div>
            <span class="iconfont icon-total-coverage"><b> 总展示数</b></span>
            <i>{{showLabel}}</i>
            <h3>{{effectiveGoogleInfo.impressions || 0}}</h3>
          </li>

          <li v-show="tabFocus == 'google'" class="g-click c">
            <div class="arrow total-show"></div>
            <span ><b class="home-icon-click"> 总点击数</b></span>
            <i>{{showLabel}}</i>
            <h3>{{effectiveGoogleInfo.clicks || 0}}</h3>
          </li>

          <li v-show="tabFocus == 'google'" class="eft">
            <div class="arrow total-effect"></div>
            <span ><b class="home-icon-click-toggle"> 总点击率</b></span>
            <i>{{showLabel}}</i>
            <h3>{{(effectiveGoogleInfo.websiteClickCtr * 100).toFixed(2) || 0.00}}%</h3>
          </li>

          <li v-show="tabFocus == 'google'">
            <div class="arrow interaction"></div>
            <span class="iconfont icon-Interaction"><b> CPC</b></span>
            <i>{{showLabel}}</i>
            <h3>￥{{effectiveGoogleInfo.cpc.toFixed(2) || 0.00}}</h3>
          </li>

        </ul>

        <loading  v-show="showLoading" />
    </section>
</template>

<script>
    import Vue from 'vue'
    import { Select,Option,DatePicker,Tabs,TabPane , Tooltip} from 'element-ui';
    import { mapGetters } from 'Vuex'

    import AccountBalanceFB from '~/components/manager/facebook/accountBalance.vue';
    import AccountBalanceGoogle from '~/components/manager/google/accountBalance.vue';
    import loading from '~/components/loading.vue';
    Vue.use(Select);
    Vue.use(Option);
    Vue.use(DatePicker);
    Vue.use(Tabs);
    Vue.use(TabPane);
    Vue.use(Tooltip);
    export default {
        components: {
          AccountBalanceFB,
          AccountBalanceGoogle,
          loading
        },
        layout: 'default',
        head(){
            return{
                title: 'ADS-广告汇总'
            }
        },
        data() {
            return {
                showLoading : false,
                tabFocus : 'facebook',
                showLabel : '近七天',
                options: [{
                  value: 'LAST_7_DAYS',
                  label: '近七天'
                }, {
                  value: 'LAST_14_DAYS',
                  label: '近十四天'
                }, {
                  value: 'LAST_30_DAYS',
                  label: '近三十天'
                }, {
                  value: 'THIS_MONTH',
                  label: '本月'
                }, {
                  value: 'LAST_WEEK',
                  label: '上周'
                }],
                value: '',
                value6: '',
                showDateSelector : false
            }
        },
        methods:{
          change(){
            this.showDateSelector = this.value == '6' ? true : false;
          },

          handleTabClick(tab, event){
             this.tabFocus = tab.name;
          },
          handleCommand(command){
            switch(command){
              case 'LAST_7_DAYS' :
              this.showLabel = '近七天';
              break;
              case 'LAST_14_DAYS' :
              this.showLabel = '近十四天';
              break;
              case 'LAST_30_DAYS' :
              this.showLabel = '近三十天';
              break;
              case 'THIS_MONTH' :
              this.showLabel = '本月';
              break;
              case 'LAST_WEEK' :
              this.showLabel = '上周';
              break;
              default :
              this.showLabel = '近七天';
              break;
            }
            this.getEffective(command);
          },
          getEffective(dateFlag) {
              dateFlag = dateFlag.toLocaleUpperCase();
              let acttype = this.tabFocus == 'facebook' ? 'getEffective' : 'getGoogleEffective';
              //let commitType = this.tabFocus == 'facebook' ? 'MANAGE_EFFECTIVE_INFO' : 'MANAGE_EFFEGOOGLR_CTIVE_INFO';
              this.showLoading = true;
              this.$store.dispatch(acttype,{dateFlag:dateFlag})
                  .then(response => {
                      this.showLoading = false;
                      if(response.data.code == 1){
                          let result = response.data;
                          if(result.data){
                              this.balance = result.data.balance == 0 ?  "0.0" : result.data.balance+'' ;
                              this.spend = result.data.spendCap;
                              if(this.tabFocus == 'facebook'){
                                  this.$store.commit('MANAGE_EFFECTIVE_INFO' , {managerEffectiveInfo : result.data})
                              }else{
                                  this.$store.commit('MANAGE_EFFEGOOGLR_CTIVE_INFO' , {managerGoogleEffectiveInfo : result.data})
                              }

                          }
                      }
                  }).catch(()=>{
                    this.showLoading = false;
                  });
          }
        },

        computed : {
            ...mapGetters({
              'effectiveGoogleInfo': 'getManagerGoogleEffectiveInfo',
              'effectiveInfo': 'getManagerEffectiveInfo',
              'isBindFB' : 'getBindFacebook',
              'isBindGoogle' : 'getBindGoogle'
            }),
            activeName: function () {
                if((!this.isBindFB && this.isBindGoogle)  ){
                    this.tabFocus = 'google'
                    return 'google'
                }else {
                    return 'facebook'
                }
            }
        },
        created() {
          
        }
    }
</script>

<style lang="scss">
  .mult-text{
    line-height:20px;
  }
$colorWhite : #FFF;
$colorCover : #0686F9;
$colorBoardBorder : #EAEEF0;
$colorTotalShow : #6CD858;
$colorTotalEffect : #8C6FFF;
$colorInteraction : #FF3526;
$colorCostMoney : #7BD2FF;
$colorTotalInquiry : #FFB100;
$colorIndexPageIcon : #D5DFE4;
$color666 : #666;

.search-home{
    text-align: left;
}
.el-select-dropdown__item{
    text-align: left;
}

.select-time-home{
  color:#178ffa;
  float:right;
}
.main-home-index {
  .icon-tip{
    display:inline-block;
    margin-left:5px;
  }
  .g-click{
    margin:0 20px;
  }
  .home-icon-click,
  .home-icon-click-toggle{
    background:url('../assets/img/home-icon-click.png') no-repeat left center;
    padding:5px 0 3px 23px;
    display:inline-block;
  }

  .home-icon-click-toggle{
    padding:7px 0 6px 23px;
    background:url('../assets/img/home-icon-click-toggle.png') no-repeat left center;
  }
  .el-tabs__nav-scroll{
    height:43px;
    background-color:#fff;
  }

  .google{
    .el-tabs__active-bar{
      left:60px;
    }
  }
  .facebook{
    .el-tabs__active-bar{
      left:20px;
    }
  }

  .el-tabs__item{
    font-weight:bold;
    padding:0 5px;
    margin: 0 20px 0 20px;

  }
  
  .el-tabs__content{
    display:none;
  }
  .el-tabs{
    height:60px;
  }
  .tab-container{
    position: relative;
    .el-icon-arrow-down{
      color:#ccc;
      font-size:9px;
    }
    .el-dropdown {
       position: absolute;
       right:10px;
       cursor:pointer;
       color:#666;
       top:10px;
       z-index:10;
    }
  }
}
.el-date-editor--daterange{
  margin-left: 15px;
}

.main-data{
  width: 1200px;
  padding-top: 20px;
  overflow: hidden;
}

.main-data li{
  width: 285px;
  height: 248px;
  text-align: center;
  float: left;
  position: relative;
  box-sizing:border-box;
  overflow: hidden;
  border: 1px solid $colorBoardBorder;
  border-radius: 4px;
  background-color: $colorWhite;
  margin-bottom: 20px;
}

.main-data li i,.main-data li span{
  display: block;
}

.main-data li span{
  font-size: 16px;
  padding-top:32px;
  color:$colorIndexPageIcon;

}
.main-data li span.desc{
  padding-top:10px;
  font-size:10px;
  color:#999;
  text-align:center;
}
.main-data li span b{
  color:#787878;
}


.main-data li i{
  font-style: normal;
  padding-top:10px;
  color:#d8d8d8;
}
.main-data li.c{
  margin:0 20px;
}
.main-data li.eft{
  margin-right:20px;
}

.main-data li h3{
  font-size: 36px;
  padding-top:48px;
  font-weight: normal;
}

.main-data li h3.height-light{
  color:$colorInteraction;
}
.arrow{
    width: 0;
    height: 0;
    position: absolute;
    right:0;
    top:0;
    transform: rotate(90deg);
    border-width: 12px;
    border-color: $colorCover transparent transparent $colorCover;
    border-style: solid;
    border-top-left-radius: 4px;
}

.total-show{
  border-color: $colorTotalShow transparent transparent $colorTotalShow;
}

.el-dropdown-menu {
    border: 1px solid #EAEEF0;
    box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.10);
    border-radius: 4px;
}
.el-dropdown-menu__item{
  color:#989898;
  font-size:11px;
}

.total-effect{
  border-color: $colorTotalEffect transparent transparent $colorTotalEffect;
}

.interaction{
  border-color: $colorInteraction transparent transparent $colorInteraction;
}

.cost{
  border-color: $colorCostMoney transparent transparent $colorCostMoney;
}

.inquiry{
  border-color: $colorTotalInquiry transparent transparent $colorTotalInquiry;
}

</style>

